<template>
	<div class="historyList" v-loading="hisListLoading">
    <div class="searchBox">
      <div class="title">筛选</div>
      <el-form ref="form" :model="searchForm" size="mini" inline>
        <div>
          <el-form-item label="类型">
            <el-select v-model="searchForm.type" placeholder="定期巡检/保养检修/故障维修">
              <el-option label="定期巡检" value="inspect"></el-option>
              <el-option label="保养检修" value="maintenance"></el-option>
              <el-option label="故障维修" value="repair"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期" label-width="100px">
            <el-date-picker
              v-model="searchForm.time"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="维修维护人员">
            <!-- <el-input v-model="searchForm.person"></el-input> -->
            <el-select v-model="searchForm.person" placeholder="请选择维修维护人员" style="width: 100%;">
              <p v-for="(item, index) of userAdminList.data" :key="index">
                <el-option :label="item.username" :value="item.username" se></el-option>
              </p>
            </el-select>
          </el-form-item>
          <el-form-item label="水站名称" label-width="120px">
            <el-select v-model="searchForm.station" placeholder="请选择水站名称">
              <p v-for="(item, index) of stationList" :key="index">
                <el-option :label="item" :value="item" se></el-option>
              </p>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" class="greenBtn" size="small" @click="onSubmit({pageSize: pageSize, pageNum: 1})">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="defendList">
      <div class="title">维护列表</div>
      <el-table :data="contentPlotList.rows" border size="mini"
        style="width: 100%"
      >
        <el-table-column
          prop="operateId"
          label="编号"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="station"
          label="站点名称"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="person"
          label="人员姓名"
          align="center">
        </el-table-column>
        <el-table-column
          prop="gmtOperate"
          label="操作时间"
          align="center">
        </el-table-column>
        <el-table-column
          prop="operate"
          label="查看详情"
          align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="routerDetail(scope.row.operateId)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          align="center">
        </el-table-column>
      </el-table>
      <myPaging :func="pageUpdate" :total="contentPlotList.total"></myPaging>
    </div>
	</div>
</template>
<script>
import {mapActions, mapGetters, mapMutations} from 'vuex'
import common from '@/plugins/common'
import myPaging from '@/components/myPaging.vue'
export default {
  name: 'historyList',
  data () {
    return {
      msg: 'hello historyList!',
      hisListLoading: false,
      lastPage: 0,
      searchForm: {
        type: '',
        time: '',
        person: '',
        station: '',
      },

		}
  },
	methods: {
    ...mapActions([
      'getContentPlotList',
      'fetchUserList'
    ]),
    ...mapMutations([
      'changeCurDetail'
    ]),
    async onSubmit(pageOption = {pageSize: this.pageSize, pageNum: 1}) {
      this.hisListLoading = true
      await this.getContentPlotList({...this.searchForm, ...pageOption})

      this.hisListLoading = false
    },
    pageUpdate(option) {
      this.onSubmit(option)
    },
    routerDetail(id) {
      let detail = this.contentPlotList.rows.find(v => v.operateId === id)
      this.changeCurDetail(detail)
      this.$router.push({path: '/historyList/detail'})
    }
  },
  async created() {
    // this.searchForm.station = this.stationList ? this.stationList[0] : '沙江4#'
    // this.searchForm.time = common.changeDateToString(new Date()) + ' 12:00:00'
    let params = {
      account: '',
      role: '',
      pageSize: 99999,
      pageNum: 1
    }
    !(this.userAdminList.data.length > 0) && await this.fetchUserList(params)
    this.onSubmit()
  },
  computed: {
    ...mapGetters({
      contentPlotList: 'getContentPlotList',
      stationList: 'getStationList',
      userInfo: 'getUserInfo',
      userAdminList: 'getUserAdminList',
      //分页依赖
      pageSize: 'getPageSize',
    })
  },
  components: {
    myPaging
  }
}
</script>
<style scoped>
.historyList {
  min-height: 100%;
}
.defendList {
  padding: 0 20px 20px 20px;
  background-color: #fff;
}
.searchBox {
  padding: 0 20px 20px 20px;
  background-color: #fff;
  margin-bottom: 20px;
}
.historyList .title {
  position: relative;
  line-height: 70px;
  font-size: 16px;
  margin-left: 15px;
}
.historyList .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}

.defendList {}

/* .paging {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	padding-right: 5%;
	margin-top: 35px;
}
.paging .pagingBtn {
	color: #15a646;
	padding: 7px 14px;
	background-color: #ffffff;
	box-shadow: 1px 1px 5px 0px 
		rgba(0, 36, 2, 0.26);
	border-radius: 5px;
	margin-right: 12px;
	cursor: pointer;
	transition: .2s ease-in;
}
.paging .pagingBtn:hover,
.paging .pagingBtn:focus {
	background: #15a646;
	color: #fff;
} */

</style>
